import styled from 'styled-components'

export const DiscoverWrapper = styled.div`
  background: url(${props => props.bgImage}) center/6000px;

  .banner {
    height: 270px;

    display: flex;
    justify-content: space-between;
    position: relative;
  }
`

export const BannerLeft = styled.div`
  width: 730px;
  height: 270px;
  .banner-item {
    width: 100%;
    img {
      width: 100%;
    }
  }
`

export const BannerRight = styled.div`
  flex: 1;
  height: 270px;
  a {
    display: block;
    width: 100%;
    height: 100%;
    background: url(${require("@/assets/img/download.png").default}) no-repeat 0 0;
  }
`

export const BannerControl = styled.div`
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: red;
  .btn {
    position: absolute;
    width: 37px;
    height: 63px;
    background-color: transparent;
    cursor: pointer;
  }
  .btn-l {
    left: -63px;
    background: url(${require("@/assets/img/banner_sprite.png").default}) no-repeat 0 -430px;
  }
  .btn-r {
    right: -63px;
    background: url(${require("@/assets/img/banner_sprite.png").default}) no-repeat 0 -578px;
  }
`